<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.3.2.1.js"></script>
    <link rel="stylesheet" href="css/ol.css">
    <script src="js/ol-debug.js"></script>

</head>
<body>
<div id="map" style="width: 100%"></div>
<script>
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
    });
    ////vector
    var vectorSource = new ol.source.Vector({
        features:[]
    });

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
    });
    function  styleFunction(feature) {
        var _name=feature.get("NAME");
        _name=map.getView().getZoom()>4?_name:"";
        return  new ol.style.Style({
            fill: new ol.style.Fill({
                //矢量图层填充颜色，以及透明度
                color:"red"
            }),
            stroke: new ol.style.Stroke({
                //边界样式
                color: '#319FD3',
                width: 1
            })
        });
    }

    // map
    var map = new ol.Map({
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view:view,
        target: 'map'
    });

    map.addLayer(vectorLayer);

    ////select
    var select=new ol.interaction.Select();
    map.addInteraction(select);


    ////draw
    var draw = new ol.interaction.Draw({
        source: vectorSource,
        stopClick:true,
        freehand:false,
        type: "Polygon"
    });
    map.addInteraction(draw);


    draw.setActive(true);
    draw.on("drawend",function (e) {
        draw.setActive(false);

        var feature=e.feature;
        var wktformat= new ol.format.WKT();
        alert(wktformat.writeGeometry(feature.getGeometry()));
    });

    ////modify
    var modify = new ol.interaction.Modify({
        features: select.getFeatures()
    });
    map.addInteraction(modify);
    modify.on("modifyend",function (e) {
        var features=e.features.array_;
        var wktformat= new ol.format.WKT();
        alert(wktformat.writeGeometry(features[0].getGeometry()));
    });

    function getTdtLayer(lyr) {
        var urls=[];
        for(var i=0;i<8;i++)
        {
            urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }
</script>
</body>
</html>
